<template>
	<view class="list-out">
		<!-- <view class="list-left" v-if="isIcon">
			<image :src="icon" mode=""></image>
		</view> -->
		<view class="list" :style="listStyle" @click="toPage">
			<view class="list-main" :style="listMainStyle">
				<view class="list-left" v-if="isIcon">
					<image :src="icon" mode=""></image>
				</view>
				<text>{{listName}}</text>
				<slot></slot>
			</view>
			<slot name="customRightSlot"></slot>
			<view class="list-right">
				<slot name="icon"></slot>
				<image :src="nextIcon" v-if="isNext" :style="listRightImgStyle" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'myList',
		props: {
			// 左侧图标
			icon: {
				type: String,
				default: '/static/components/qc-list/praise.png'
			},
			// 右侧图标
			nextIcon: {
				type: String,
				default: '/static/components/qc-list/right.png'
			},
			// 是否显示左侧图标
			isIcon: {
				type: Boolean,
				default: true
			},
			// 是否显示右侧图标
			isNext: {
				type: Boolean,
				default: true
			},
			// 列表主体文字样式 Object类型 格式遵循vue动态style写法 注:(不是列表的样式是列表文字的样式，文字占70%)
			listMainStyle: {
				type: String,
				default: ''
			},
			// 列表样式
			listStyle: {
				type: String,
				default: ''
			},
			// 列表跳转 string类型 格式'/pages/list/list'
			listLink: {
				type: String,
				default: ''
			},
			// 列表名称 string类型 
			listName: {
				type: [String, Number],
				default: ''
			},
			// 右侧图标样式
			listRightImgStyle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				title: ''
			}
		},
		onLoad() {

		},
		methods: {
			// 页面跳转
			toPage() {
				this.$emit('toPage');
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-out {
		// height: calc(100vh - 50vh);

		.list {
			width: 100%;
			height: 120rpx;
			display: flex;
			background-color: #FFFFFF;
			// box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
			// margin-top: 20rpx;
			// border-radius: 20rpx;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.list-left {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
				display: flex;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.list-main {
				// width: 75%;
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				font-weight: bold;
				color: #4E4C56;
				font-size: 30rpx;
			}

			.list-right {
				width: 10%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 15rpx;
					height: 25rpx;
				}
			}
		}
	}
</style>
